<!--
 * @Author: shenya
 * @Date: 2023-11-01 17:52:54
 * @Description:
-->
<template>
  <div>
    <el-form
      ref="addform"
      :model="addform"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
    >
      <div class="app">
        <div class="app-title">{{ title }}</div>
        <div class="app-content">
          <el-form-item
            label="路由："
            prop="name"
          >
            <el-input
              v-model="addform.route"
              maxlength="100"
              show-word-limit
            ></el-input>
          </el-form-item>
          <avue-crud
            ref="crud"
            v-model="form"
            :option="accountOption"
            :data="data"
          >
            <template #menu="{ row }">
              <el-button
                type="text"
                @click="deleteRow(row, row.$index)"
              >
                删除
              </el-button>
            </template>
          </avue-crud>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
import { accountOption } from '@/const/crud/advertising/page';
export default {
  props: {
    title: {
      type: String,
    },
    action: {
      type: String,
    },
  },
  data() {
    return {
      form: {},
      addform: {},
      rules: {},
      data: [
        {
          id: 0,
          $cellEdit: true,
          parameter: '',
          parameterName: '',
        },
      ],
      accountOption: accountOption(),
    };
  },
  methods: {
    resetPage() {
      if (this.action === 'add') {
        this.data = [
          {
            id: 0,
            $cellEdit: true,
            parameter: '',
            parameterName: '',
          },
        ];
      }
    },
    //删除行
    deleteRow(row, index) {
      console.log('row', row);
      this.data.splice(index, 1);
    },
  },
};
</script>
<style lang="scss" scoped>
.app {
  margin-bottom: 20px;
  .app-title {
    border-bottom: 1px solid #dcdfe6;
    padding-bottom: 15px;
    font-weight: 600;
  }
  .app-content {
    margin-top: 25px;
  }
}
</style>
